<template>
    <div class="app-container">
      <el-card class="company-card">
        <el-row gutter={20} class="company-info">
          <!-- 第一个卡片展示公司Logo和公司名称 -->
          <el-col :span="12"> <!-- 设置span为12，确保每个卡片宽度相等 -->
            <el-card :body-style="{ padding: '40px' }" class="info-card">
              <img :src="companyinfoList[0].logoUrl" alt="公司Logo" class="company-logo" />
              <h3 class="company-name">杨氏集团</h3> <!-- 显示公司名称 -->
            </el-card>
          </el-col>
  
          <!-- 第二个卡片展示其他公司信息 -->
          <el-col :span="12"> <!-- 设置span为12，确保每个卡片宽度相等 -->
            <el-card :body-style="{ padding: '40px' }" class="info-card">
              <p><strong>行业：</strong>{{ companyinfoList[0].industry }}</p>
              <p><strong>公司规模：</strong>{{ companyinfoList[0].companySize }}</p>
              <p><strong>成立日期：</strong>{{ companyinfoList[0].foundDate }}</p>
              <p><strong>联系方式：</strong>{{ companyinfoList[0].contactInfo }}</p>
            </el-card>
          </el-col>
        </el-row>
  
        <!-- 修改按钮 -->
        <el-button type="primary" icon="el-icon-edit" @click="handleUpdate" size="small" class="update-button">修改信息</el-button>
  
        <!-- 修改信息弹出层 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="公司名称" prop="companyName">
              <el-input v-model="form.companyName" placeholder="请输入公司名称" />
            </el-form-item>
            <el-form-item label="公司Logo链接" prop="logoUrl">
              <el-input v-model="form.logoUrl" placeholder="请输入公司Logo链接" />
            </el-form-item>
            <el-form-item label="公司规模" prop="companySize">
              <el-input v-model="form.companySize" placeholder="请输入公司规模" />
            </el-form-item>
            <el-form-item label="所属行业" prop="industry">
              <el-input v-model="form.industry" placeholder="请输入所属行业" />
            </el-form-item>
            <el-form-item label="成立日期" prop="foundDate">
              <el-date-picker clearable
                v-model="form.foundDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择成立日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="联系方式" prop="contactInfo">
              <el-input v-model="form.contactInfo" placeholder="请输入联系方式" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
      </el-card>
    </div>
  </template>
  
  <script>
  import { getFixedCompanyinfo, updateCompanyinfo } from "@/api/system/companyinfo";
  
  export default {
    name: "Companyinfo",
    data() {
      return {
        loading: true,
        companyinfoList: [],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          companyId: 1, // 查询公司ID为1的信息
        },
        dialogVisible: false,
        dialogTitle: "修改公司信息",
        form: {
          companyId: 1,
          companyName: '',
          logoUrl: '',
          companySize: '',
          industry: '',
          foundDate: '',
          contactInfo: '',
        },
        rules: {
          companyName: [
            { required: true, message: "公司名称不能为空", trigger: "blur" }
          ],
          logoUrl: [
            { required: true, message: "公司Logo链接不能为空", trigger: "blur" }
          ]
        }
      };
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        this.loading = true;
        getFixedCompanyinfo(this.queryParams).then(response => {
          this.companyinfoList = [response.data]; // 只获取一个公司信息
          this.loading = false;
        }).catch(error => {
          console.error(error);
          this.loading = false;
        });
      },
      handleUpdate() {
        this.dialogVisible = true;
        const company = this.companyinfoList[0];
        this.form = { ...company }; // 将公司数据填充到表单
      },
      cancel() {
        this.dialogVisible = false;
        this.resetForm();
      },
      submitForm() {
        this.$refs.form.validate(valid => {
          if (valid) {
            // 执行公司信息更新的API调用
            updateCompanyinfo(this.form).then(response => {
              this.$message.success("公司信息更新成功");
              this.dialogVisible = false;
              this.getList(); // 更新列表数据
            }).catch(error => {
              console.error(error);
              this.$message.error("更新失败");
            });
          }
        });
      },
      resetForm() {
        this.form = {
          companyId: 1,
          companyName: '',
          logoUrl: '',
          companySize: '',
          industry: '',
          foundDate: '',
          contactInfo: ''
        };
        this.$refs.form.resetFields();
      }
    }
  };
  </script>
  
  <style scoped>
  .app-container {
    background-color: #f9f9f9;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 1200px;
    margin: auto;
  }
  
  .intro-text {
    color: gray;
    margin: 10px 0;
    font-size: 14px;
  }
  
  .company-card {
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }
  
  .company-info .info-card {
    margin-bottom: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .company-info .info-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  }
  
  .company-logo {
    max-width: 200px; /* 增大Logo尺寸 */
    height: auto;
    margin-bottom: 20px;
    border-radius: 10px;
  }
  
  h3.company-name {
    margin-bottom: 20px;
    font-size: 28px; /* 增大公司名称字体 */
    font-weight: 600;
    color: #333;
  }
  
  .company-industry, .company-size {
    font-size: 18px;
    color: #666;
  }
  
  p {
    font-size: 16px;
    color: #333;
  }
  
  .update-button {
    margin-top: 30px;
  }
  
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
  }
  </style>
  